<template>
  <el-dialog
    append-to-body
    :title="title"
    :visible.sync="showDialog"
    :fullscreen="fullscreen"
    :close-on-click-modal="false"
    :width="width"
    :custom-class="bodyCenterScroll"
    :close-on-press-escape="escClose"
    :before-close="cancel"
    @open="handlerOpenDialog"
  >
    <slot />
    <span v-if="tools" slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" :disabled="disabled" @click="ok">{{ okBtn }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '提示'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    },
    centerScroll: {
      type: Boolean,
      default: false
    },
    okBtn: {
      type: String,
      default: '确定'
    },
    escClose: {
      type: Boolean,
      default: false
    },
    tools: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      disabled: false
    }
  },
  computed: {
    showDialog: {
      get() {
        return this.dialogVisible
      },
      set() {
        // do nothing
      }
    },
    bodyCenterScroll() {
      return this.centerScroll ? 'bodyCenterScroll' : ''
    }
  },
  methods: {
    ok() {
      this.disabled = true
      this.$emit('ok')
    },
    cancel() {
      this.$emit('close')
    },
    handlerOpenDialog() {
      this.disabled = false
      this.$emit('show')
    }
  }
}
</script>

<style lang="stylus">
  .bodyCenterScroll {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    .el-dialog__body {
     overflow: auto;
    }
  }
</style>
